Flowing Text Around Floating Elements

Department of Computer Science

The Department of Computer Science at the College of Staten Island is an internationally recognized department which specializes in programming languages, Internet technology and object technology. We offer courses on C++, Visual Basic, Internet and World Wide Web programming, Object Technology and many advanced areas of theoretical computer science.

ABET Accredited BS degree in Computer Science

The American Board of Engineering Technologies has continuously accredited out Bachelor of Science degree since 1989. We offer one of only 4 accredited Computer Science degrees in the State of New York. Our faculty is known internationally, presents is research results at conferences all over the world, and publishes in the most respected journals.

At the top of this page are two examples of floating elements, which as with absolutely positined elements, override the normal left-to-right and top-to-bottom flow of test in an XHTML web page. Floating an element moves it to one side of the screen and forces other content to float around the floated element. The best way to understand the properties of floated elements is to open the external style sheet floatstyle.css, make changes to it and reload this tutorial in your browser after each change to see the effect. Briefly, this is what each new style property does:

float: causes the div to float to either the left or right side of the window
text-align causes the text inside the floated element to align with the left or right margin
padding causes space to be added around the content of a block level element; i.e. it determines the distance between the border of the element and the content inside it.
margin does more or less the same thing. The best way to see the effect of these is to play with them by changing them
both padding and margin can be individually specified for individual sides of the element by using magrin-top, padding-left, etc but again, this is getting carried away with this stuff!

Note that each floated element and its associated paragrapg of text is enclosed in a div with the class section. This enables the use of a uniform border around each of these structures. Also note the shorthand method of specifying the border; viz: border: <width> <style> <color>

The style sheet for this page, floatstyle.css contains another feature called media types. These enables the web page designer to determine the appearance of the web page depending on the media used to display the page. In this style sheet, @media all is the default used by the web browser and @media print is used when the page is sent to a printer. To test the appearance of this, select print preview from the browser menu. Other media types are handheld, braille, and aural for a speech synthesizing browser. The print media type has higher specificity than the all media type, so the print style overrides the all style

OK, we are almost done with CSS, please go to Part 10 to conclude this tutorial